<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link type="text/css" rel="stylesheet" href="css/bootstrap.css"/>
    <link type="text/css" rel="stylesheet" href="css/chapter2.css"/>
</head>
<body>
    <pre>
        组件：Bootstrap组件是Bootstrap框架的核心之一
            组件默认会有css布局添加样式
        图标（icon）：
            可以作用在内联元素上
            图标网址：http:// glyphicons.com/
            按钮+图标  导航列表+图标  文本框+图标  
        下拉列表 dropdown
        文本框
        导航
    </pre>

    <span class="glyphicon glyphicon-star-empty"></span>
    <div class="glyphicon glyphicon-heart" style="border: 1px red solid;"></div>

    <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-star"></span>点赞
    </button>

    <ul class="list-inline">
        <li class="text-center">
            <span class="glyphicon glyphicon-star"></span><br/>首页
        </li>
        <li>
            <span class="glyphicon glyphicon-star"></span>岗位课
        </li>
        <li>
            <span class="glyphicon glyphicon-star"></span>商城
        </li>
        <li>
            <span class="glyphicon glyphicon-star"></span>关于我们
        </li>
        <li>
            <div class="dropdown">
                <button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown">Action
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                     <li><a href="#">Action</a></li>
                </ul>
            </div>
        </li>
    </ul>

    <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" placeholder="Username">
        <span class="input-group-addon"><span class="glyphicon glyphicon-star"></span></span>
    </div>
    <br/>
    <div class="input-group input-group-lg">
        <input type="text" class="form-control" placeholder="请输入要搜索的内容" >
        <span class="input-group-addon" >百度一下</span>
    </div>
    <div class="input-group input-group-sm">
        <input type="text" class="form-control" placeholder="请输入要搜索的内容" >
        <span class="input-group-addon" >百度一下</span>
    </div>
    
    <div class="dropdown open">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
          Dropdown
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
    </div>

    <br/>

    <div class="btn-group">
        <button type="button" class="btn btn-default">Action</button>
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" >
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
             <li><a href="#">Action</a></li>
        </ul>
    </div>
    
    <br/>

    <ul class="nav nav-tabs ">
        <li><a href="#">主页</a></li>
        <li><a href="#">微博</a></li>
        <li><a href="#">图书</a></li>
        <li class="active"><a href="#">关于我们</a></li>
    </ul>
    
    <ul class="nav nav-pills ">
        <li><a href="#">主页</a></li>
        <li><a href="#">微博</a></li>
        <li class="active"><a href="#">图书</a></li>
        <li><a href="#">关于我们</a></li>
    </ul>

    <br/>
    
    <ul class="nav nav-pills nav-justified">
        <li  class="active"><a href="#">主页</a></li>
        <li><a href="#">微博</a></li>
        <li><a href="#">图书</a></li>
        <li><a href="#">关于我们</a></li>
    </ul>	

    <ul class="nav nav-pills ">
        <li class="active"><a href="#">首页</a></li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">其他
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu ">
                <li><a href="#">收藏 </a></li>
           </ul>
        </li>
    </ul>
    
    <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <a href="#" class="navbar-brand">LOGO</a>
        </div>
        <ul class="nav navbar-nav ">
            <li  class="active"><a href="#">主页</a></li>
            <li><a href="#">微博</a></li>
            <li><a href="#">图书</a></li>
        </ul>
    </nav>
    
    <br/>

    <div class="nav navbar-nav">
        <div class="btn bg-primary navbar-text">button1</div>
        <div class="btn btn-success navbar-link">button2</div>
        <button class="btn btn-default navbar-btn">button3</button>
    </div>

    <br/>

    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="navbar-header">
            <a href="#" class="navbar-brand">LOGO</a>
        </div>
        <ul class="nav navbar-nav ">
            <li  class="active"><a href="#">主页</a></li>
            <li><a href="#">微博</a></li>
            <li><a href="#">图书</a></li>
        </ul>
    </nav>

    <!-- <nav class="navbar navbar-default navbar-fixed-bottom">
        <div class="navbar-header">
            <a href="#" class="navbar-brand">LOGO</a>
        </div>
        <ul class="nav navbar-nav ">
            <li  class="active"><a href="#">主页</a></li>
            <li><a href="#">微博</a></li>
            <li><a href="#">图书</a></li>
        </ul>
    </nav> -->

    <br/>
    <br/>

    <nav class="nav navbar-inverse" style="padding-right: 20px">
        <div class="navbar-header">
            <!--navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在的元素-->
            <button  class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" >
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <!--确保无论在宽屏还是窄屏，navbar-brand都会显示-->
            <a href="#" class="navbar-brand">LOGO</a>
        </div>
        <!--屏幕宽度小于768px时，该div内的内容默认都会隐藏（通过点击icon-bar所在的图标，可以展开）大于768px时默认显示-->
        <div class="collapse navbar-collapse navbar-left">
            <ul class="nav navbar-nav ">
                <li><a class="active" href="#">首页</a></li>
                <li><a href="#">图书 </a></li>
                <li><a href="#">作品 </a></li>
                <li><a href="#">展览 </a></li>
                <li><a href="#">关于我们 </a></li>
            </ul>
        </div>
        <form class="navbar-form navbar-right" role="search">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">搜索</button>
        </form>
    </nav>


    <br/>
    <br/>

    <div id="mediaDiv" style="border:1px red solid; height:100px; width:150px">
        媒体查询设置背景颜色
    </div>

    <br/>
    <br/>

    <ul class="list-group">
        <li class="list-group-item active ">同桌的你
            <!--徽章图标-->
            <span class="badge">12</span>
        </li>
        <!--list-group-item-success 带有样式的列表-->
        <li class="list-group-item list-group-item-success">花样年华
            <span class="badge">5</span>
        </li>
        <li class="list-group-item">勤能补拙
        </li>
    </ul>
    
    <br/>
    <br/>
    <div style="text-align:center">
    <ul class="pagination" >
        <li><a href="#">&laquo;</a></li>
        <li><a href="#">1</a></li>
        <li><a href=“#”>2</a></li>
        <li class="active"><a href=“#”>3</a></li>
        <li class="disabled"><a href="#">&raquo;</a></li>
    </ul>
    </div>

    
    <ul class="pager">
        <li><a href="#">首页</a></li>
        <li><a href="#">上一页</a></li>
        <li><a href=“#”>下一页</a></li>
        <li class="disabled"><a href="#">末页</a></li>
    </ul>

    <br/>
    <br/>
    <br/>
    <br/>

    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>

</body>
</html>